<script setup>
  const userName = $ref('')
  const password = $ref('')
  const desc = $ref('')
  const hobbies = $ref([])
  const isDang = $ref(false)
  const sex = $ref('女')
  const year = $ref(1998)
  const tags = $ref([])
  const msg = $ref('')
  const age = $ref(18)

  function register(){
    console.log(userName)
    console.log(password)
    console.log(desc)
    hobbies.forEach((v)=>{
      console.log(v)
    })
    console.log(isDang)
    console.log(sex)
    console.log(year)
    console.log(tags)
  }

  function myChange(){
    console.log('myChange')
  }

</script>

<template>
  <h4>表单输入</h4>
  用户名:<input type="text" v-model="userName"><br/>
  密码:<input type="text" v-model="password"> <br/>
  个人介绍:<textarea cols="20" rows="10" v-model="desc"></textarea><br/>
  个人爱好:<br/>
  足球、<input type="checkbox" value="足球" v-model="hobbies"><br/>
  篮球、<input type="checkbox" value="篮球" v-model="hobbies"><br/>
  乒乓球、<input type="checkbox" value="乒乓球" v-model="hobbies"><br/>
  羽毛球、<input type="checkbox" value="羽毛球" v-model="hobbies"><br/>
  是否是党员:<input type="checkbox" v-model="isDang"><br/>
  性别:<br/>
  <input type="radio" value="男" v-model="sex"><br/>
  <input type="radio" value="女" v-model="sex"><br/>
  出生年月日:<br/>
  <select v-model="year">
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    <option value="2000">2000</option>
  </select><br/>

  个人标签:<br/>
  <select v-model="tags" multiple>
    <option value="优秀青年">优秀青年</option>
    <option value="逗比青年">逗比青年</option>
    <option value="幽默青年">幽默青年</option>
  </select>
  msg:{{msg}}<br/>
  <!-- 在 "change" 事件后同步更新而不是 "input" -->
  <input v-model.lazy="msg" @change="myChange" /><br/>
  <input v-model.trim="age" /><br/>

  <button @click="register">注册</button>
</template>

<style>

</style>
